<template>
  <el-form label-width="100px">
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称" v-model="skuParams.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        placeholder="价格(元)"
        type="number"
        v-model="skuParams.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input
        placeholder="重量(g)"
        type="number"
        v-model="skuParams.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        placeholder="SKU描述"
        type="textarea"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item
          v-for="item in tradeAttrList"
          :key="item.id"
          :label="item.attrName"
          style="margin: 5px 5px"
        >
          <el-select style="width: 200px" v-model="item.selectValue">
            <el-option
              v-for="attrValue in item.attrValueList"
              :key="attrValue.id"
              :label="attrValue.valueName"
              :value="`${item.id}:${attrValue.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item
          v-for="item in saleAttrList"
          :key="item.id"
          :label="item.saleAttrName"
          style="margin: 5px 5px"
        >
          <el-select style="width: 200px" v-model="item.selectValue">
            <el-option
              v-for="saleAttrValue in item.spuSaleAttrValueList"
              :key="saleAttrValue.id"
              :label="saleAttrValue.saleAttrValueName"
              :value="`${item.id}:${saleAttrValue.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border ref="table" :data="imgList">
        <el-table-column
          type="selection"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column label="图片" align="center">
          <template #default="{ row }">
            <img :src="row.imgUrl" style="height: 150px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="success" @click="setDefultImg(row)">
              设为默认图片
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button size="default" @click="save">保存</el-button>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="SkuForm">
import { reactive, ref } from 'vue'
import { reqAttr } from '@/api/product/attr'
import {
  reqAddSku,
  reqSpuHasSaleAttr,
  reqSpuImageList,
} from '@/api/product/spu'
import { SkuData } from '@/api/product/spu/type.ts'
import { ElMessage } from 'element-plus'

let $emits = defineEmits(['reback'])
// 平台属性
let tradeAttrList = ref<any>([])
// 销售属性
let saleAttrList = ref<any>([])
// 展示图片
let imgList = ref<any>([])
//收集SKU的参数
let skuParams = reactive<SkuData>({
  //父组件传递过来的数据
  category3Id: '', //三级分类的ID
  spuId: '', //已有的SPU的ID
  tmId: '', //SPU品牌的ID
  //v-model收集
  skuName: '', //sku名字
  price: '', //sku价格
  weight: '', //sku重量
  skuDesc: '', //sku的描述

  skuAttrValueList: [
    //平台属性的收集
  ],
  skuSaleAttrValueList: [
    //销售属性
  ],
  skuDefaultImg: '', //sku图片地址
})

function cancel() {
  $emits('reback', 0)
}

async function initSkuData(param: any) {
  let { c1Id, c2Id, c3Id, spuId, spu } = param
  //收集数据
  skuParams.category3Id = c3Id
  skuParams.spuId = spuId
  skuParams.tmId = spu.tmId
  // 调用三个接口，获取数据保存到响应式对象中
  let result1 = await reqAttr(c1Id, c2Id, c3Id)
  let result2 = await reqSpuHasSaleAttr(spuId)
  let result3 = await reqSpuImageList(spuId)
  //
  tradeAttrList.value = result1.data
  saleAttrList.value = result2.data
  imgList.value = result3.data
}

let table = ref()
function setDefultImg(row: any) {
  table.value.clearSelection()
  table.value.toggleRowSelection(row, true)
  skuParams.skuDefaultImg = row.imgUrl
}

async function save() {
  //整理参数
  //平台属性
  skuParams.skuAttrValueList = tradeAttrList.value
    .filter((item: any) => item.selectValue)
    .map((item: any) => {
      let [attrId, valueId] = item.selectValue.split(':')
      return {
        attrId,
        valueId,
      }
    })
  //销售属性
  skuParams.skuSaleAttrValueList = saleAttrList.value.reduce(
    (prev: any, next: any) => {
      if (next.selectValue) {
        let [saleAttrId, saleAttrValueId] = next.selectValue.split(':')
        prev.push({
          saleAttrId,
          saleAttrValueId,
        })
      }
      return prev
    },
    [],
  )
  //添加SKU的请求
  let result: any = await reqAddSku(skuParams)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '添加SKU成功',
    })
    //通知父组件切换场景为零
    $emits('reback', 0)
  } else {
    ElMessage({
      type: 'error',
      message: '添加SKU失败',
    })
  }
}
defineExpose({ initSkuData })
</script>

<style scoped lang="scss"></style>
